<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left">
      <el-form-item label="链接状态">
        <el-select v-model="formInline.connectionStatus">
          <el-option label="请选择" :value="0"></el-option>
          <el-option label="在线" :value="1"></el-option>
          <el-option label="离线" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备编号">
        <el-input v-model="formInline.equipMentNum"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getOledScreens">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="addoledscreen">新增</el-button>
      </el-form-item>
    </el-form>

    <br>

    <el-dialog title="新增设备" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="设备编号：" :label-width="formLabelWidth">
          <el-input v-model="form.equipMentNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接状态：">
          <el-select v-model="form.connectionStatus" :label-width="formLabelWidth">
            <el-option label="在线" :value="true"></el-option>
            <el-option label="离线" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否开启：">
          <el-select v-model="form.openStaus" :label-width="formLabelWidth">
            <el-option label="启用" :value="true"></el-option>
            <el-option label="禁用" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人：" :label-width="formLabelWidth">
          <el-input v-model="form.principal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="postoledscreen">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑设备" :visible.sync="dialogFormPutVisible">
      <el-form :model="form">
        <el-form-item label="设备编号：" :label-width="formLabelWidth">
          <el-input v-model="form.equipMentNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接状态：">
          <el-select v-model="form.connectionStatus" :label-width="formLabelWidth">
            <el-option label="在线" :value="true"></el-option>
            <el-option label="离线" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否开启：">
          <el-select v-model="form.openStaus" :label-width="formLabelWidth">
            <el-option label="启用" :value="true"></el-option>
            <el-option label="禁用" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人：" :label-width="formLabelWidth">
          <el-input v-model="form.principal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormPutVisible = false">取消</el-button>
        <el-button type="primary" @click="putoledscreen">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog title="设备设置" :visible.sync="dialogFormSeZhiVisible">
      <el-form :model="form">
        <el-form-item label="设备编号：" :label-width="formLabelWidth">
          <el-input v-model="form.equipMentNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开启时间：" :label-width="formLabelWidth">
          <el-date-picker v-model="form.openingTime" type="datetime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="关闭时间：" :label-width="formLabelWidth">
          <el-date-picker v-model="form.closingTime" type="datetime">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormSeZhiVisible = false">取消</el-button>
        <el-button type="primary" @click="sezhioledscreen">确认</el-button>
      </div>
    </el-dialog>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" border
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="equipMentNum" label="设备编号" align="center"> </el-table-column>
      <el-table-column prop="principal" label="负责人" align="center"> </el-table-column>
      <el-table-column prop="connectionStatus" label="连接状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.connectionStatus == true">在线</span>
          <span v-if="scope.row.connectionStatus == false">离线</span>
        </template>
      </el-table-column>
      <el-table-column prop="openStaus" label="开启状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.openStaus == true">启用</span>
          <span v-if="scope.row.openStaus == false">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="openingTime" label="开启时间" align="center"> </el-table-column>
      <el-table-column prop="closingTime" label="关闭时间" align="center"> </el-table-column>
      <el-table-column prop="remark" label="备注" align="center"> </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="primary" @click="seZhi(scope.row)">设置</el-link>
          <el-link type="success" @click="updateopenTrue(scope.row)">启动</el-link>
          <el-link type="info" @click="updateopenFalse(scope.row)">关闭</el-link>
          <el-link type="warning" @click="updaeoledscreen(scope.row)">修改</el-link>
          <el-link type="danger" @click="deletEoledScreen(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="formInline.pageIndex" :page-sizes="[10, 20, 30, 40]" :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="count">
    </el-pagination>
  </div>
</template>
<script>
import {
  getoledScreenapi,
  updateoledScreenTrueapi,
  updateoledScreenFalseapi,
  deleteoledScreenapi,
  addoledScreenapi,
  updateoledScreenapi,
  addoledScreenlogapi,
} from "@/api/iotInfo/oledScreen";
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        pageIndex: 1,
        pageSize: 10,
        connectionStatus: 0,
        equipMentNum: "",
      },
      dialogFormVisible: false,
      dialogFormPutVisible: false,
      dialogFormSeZhiVisible: false,
      oledform: {},
      multipleSelection: [],
      SelectionData: {},
      formLabelWidth: "85px",
      count: 0,
      form: {
        id: 0,
        equipMentNum: "",
        principal: "",
        connectionStatus: true,
        openStaus: true,
        openingTime: "",
        closingTime: "",
        remark: "",
      },
      oledlogform: {
        id: 0,
        equipMentNum: "",
        createDate: "",
        connectionStatus: true,
        openStaus: true,
        openingTime: "",
        closingTime: "",
        remark: "",
      },
    };
  },
  created() {
    this.getOledScreens();
  },
  methods: {
    getOledScreens() {
      getoledScreenapi(this.formInline).then((res) => {
        this.tableData = res.data.data;
        this.count = res.data.totalCount;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      this.getOledScreens();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageIndex = val;
      this.getOledScreens();
    },
    resetForm() {
      (this.formInline.connectionStatus = 0),
        (this.formInline.equipMentNum = "");
    },
    updateopenTrue(row) {
      updateoledScreenTrueapi(row).then((res) => {
        if (res.data.message == "操作成功") {
          this.$message({
            message: "启动成功",
            type: "success",
          });
          this.oledlogform = {};
          this.oledlogform.id = 0;
          this.oledlogform.equipMentNum = row.equipMentNum;
          this.oledlogform.createDate = "";
          this.oledlogform.connectionStatus = row.connectionStatus;
          this.oledlogform.openStaus = true;
          this.oledlogform.openingTime = row.openingTime;
          this.oledlogform.closingTime = row.closingTime;
          this.oledlogform.remark = row.remark;
          addoledScreenlogapi(this.oledlogform).then((res) => {
            if (res.data.message == "操作成功") {
              console.log("OLED大屏日志添加成功");
              this.getOledScreens();
            } else {
              console.log("OLED大屏日志添加失败");
            }
          });
        } else {
          this.$message({
            message: "启动失败",
            type: "error",
          });
        }
      });
    },
    updateopenFalse(row) {
      updateoledScreenFalseapi(row).then((res) => {
        if (res.data.message == "操作成功") {
          this.$message({
            message: "关闭成功",
            type: "success",
          });
          this.oledlogform = {};
          this.oledlogform.id = 0;
          this.oledlogform.equipMentNum = row.equipMentNum;
          this.oledlogform.createDate = "";
          this.oledlogform.connectionStatus = row.connectionStatus;
          this.oledlogform.openStaus = false;
          this.oledlogform.openingTime = row.openingTime;
          this.oledlogform.closingTime = row.closingTime;
          this.oledlogform.remark = row.remark;
          addoledScreenlogapi(this.oledlogform).then((res) => {
            if (res.data.message == "操作成功") {
              console.log("OLED大屏日志添加成功");
              this.getOledScreens();
            } else {
              console.log("OLED大屏日志添加失败");
            }
          });
        } else {
          this.$message({
            message: "关闭失败",
            type: "error",
          });
        }
      });
    },
    deletEoledScreen(row) {
      if (confirm("确定要删除吗？")) {
        deleteoledScreenapi(row).then((res) => {
          if (res.data.message == "操作成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getOledScreens();
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
      }
    },
    addoledscreen() {
      this.form = {
        id: 0,
        equipMentNum: "",
        principal: "",
        connectionStatus: true,
        openStaus: true,
        openingTime: "",
        closingTime: "",
        remark: "",
      };
      this.dialogFormVisible = true;
    },
    postoledscreen() {
      console.log(this.form);
      addoledScreenapi(this.form).then((res) => {
        if (res.data.message == "操作成功") {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.oledlogform = {};
          this.oledlogform.id = 0;
          this.oledlogform.equipMentNum = this.form.equipMentNum;
          this.oledlogform.createDate = "";
          this.oledlogform.connectionStatus = this.form.connectionStatus;
          this.oledlogform.openStaus = this.form.openStaus;
          this.oledlogform.openingTime = this.form.openingTime;
          this.oledlogform.closingTime = this.form.closingTime;
          this.oledlogform.remark = this.form.remark;
          addoledScreenlogapi(this.oledlogform).then((res) => {
            if (res.data.message == "操作成功") {
              this.dialogFormVisible = false;
              this.getOledScreens();
            } else {
              console.log("OLED大屏日志添加失败");
            }
          });
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    },
    updaeoledscreen(row) {
      this.dialogFormPutVisible = true;
      this.form = row;
    },
    putoledscreen() {
      updateoledScreenapi(this.form).then((res) => {
        if (res.data.message == "操作成功") {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          this.oledlogform = {};
          this.oledlogform.id = 0;
          this.oledlogform.equipMentNum = this.form.equipMentNum;
          this.oledlogform.createDate = "";
          this.oledlogform.connectionStatus = this.form.connectionStatus;
          this.oledlogform.openStaus = this.form.openStaus;
          this.oledlogform.openingTime = this.form.openingTime;
          this.oledlogform.closingTime = this.form.closingTime;
          this.oledlogform.remark = this.form.remark;
          addoledScreenlogapi(this.oledlogform).then((res) => {
            if (res.data.message == "操作成功") {
              console.log("OLED大屏日志添加成功");
              this.getOledScreens();
              this.dialogFormPutVisible = false;
            } else {
              console.log("OLED大屏日志添加失败");
            }
          });
        } else {
          this.$message({
            message: "编辑失败",
            type: "error",
          });
        }
      });
    },
    seZhi(row) {
      console.log(row);
      this.dialogFormSeZhiVisible = true;
      this.form = row;
    },
    sezhioledscreen() {
      updateoledScreenapi(this.form).then((res) => {
        if (res.data.message == "操作成功") {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.oledlogform = {};
          this.oledlogform.id = 0;
          this.oledlogform.equipMentNum = this.form.equipMentNum;
          this.oledlogform.createDate = "";
          this.oledlogform.connectionStatus = this.form.connectionStatus;
          this.oledlogform.openStaus = this.form.openStaus;
          this.oledlogform.openingTime = this.form.openingTime;
          this.oledlogform.closingTime = this.form.closingTime;
          this.oledlogform.remark = this.form.remark;
          addoledScreenlogapi(this.oledlogform).then((res) => {
            if (res.data.message == "操作成功") {
              console.log("OLED大屏日志添加成功");
              this.getOledScreens();
              this.dialogFormSeZhiVisible = false;
            } else {
              console.log("OLED大屏日志添加失败");
            }
          });
        } else {
          this.$message({
            message: "设置失败",
            type: "error",
          });
        }
      });
    },
  },
};
</script>
<style ></style>